/// <reference path="references.scss" />

.pagination {
    flex-wrap: wrap;
    gap: var(--pag-gap);
}

.pagination {
    --pag-size: #{$input-height};
    --pag-border-radius: var(--border-radius-md);
    --pag-gap: 6px;
    --pag-padding-x: #{$pagination-padding-x};
    --pag-font-size: #{$font-size-base};
}

.pagination-lg {
    --pag-size: #{$input-height-lg};
    --pag-border-radius: var(--border-radius-lg);
    --pag-gap: 8px;
    --pag-padding-x: #{$pagination-padding-x-lg};
    --pag-font-size: #{$font-size-lg};
}

.pagination-sm,
.pagination-xs {
    --pag-border-radius: var(--border-radius-sm);
    --pag-gap: 4px;
}

.pagination-sm {
    --pag-size: #{$input-height-sm};
    --pag-padding-x: #{$pagination-padding-x-sm};
    --pag-font-size: #{$font-size-sm};
}

.pagination-xs {
    --pag-size: 28px;
    --pag-padding-x: #{$pagination-padding-x-xs};
    --pag-font-size: #{$font-size-xs};
}

@include media-breakpoint-down(sm) {
    // Make md and lg paginators one level smaller on <=sm
    .pagination-md {
        --pag-size: #{$input-height-sm};
        --pag-border-radius: var(--border-radius-sm);
        --pag-padding-x: #{$pagination-padding-x-sm};
        --pag-gap: 4px;
        --pag-font-size: #{$font-size-sm};
    }

    .pagination-lg {
        --pag-size: #{$input-height};
        --pag-border-radius: var(--border-radius-md);
        --pag-padding-x: #{$pagination-padding-x};
        --pag-gap: 6px;
        --pag-font-size: #{$font-size-base};
    }
}

.page-item {
    display: block;
}

.page-link {
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    font-weight: $font-weight-medium;
    min-width: var(--pag-size);
    height: var(--pag-size);
    line-height: calc(var(--pag-size) - 2px);
    font-size: var(--pag-font-size);
    margin: 0;
    padding: 0 var(--pag-padding-x);
    border-radius: var(--pag-border-radius);

    &:active {
        background-color: $gray-300;
    }

    &:focus-visible {
        @include button-focus-visible();
    }
}

.page-item.gap > .page-link {
    &:not(:hover) {
        background-color: transparent;
        border-color: transparent;
    }
}

@media (max-width: 412px) {
    .page-item:not(.page-item-nav) {
        display: none;
    }
}

.page-item-nav.back .nav-label {
    padding-inline-start: 0.375rem;
}

.page-item-nav.advance .nav-label {
    padding-inline-end: 0.375rem;
}

span.page-link {
    cursor: default !important;
    background-color: transparent !important;
    border-color: transparent !important;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

/*.pagination-xs {
    @include pagination-size($pagination-padding-y-xs, $pagination-padding-x-xs, $font-size-xs, $line-height-sm, $border-radius-sm);
}*/